<template>
  <div class="recommend-list">
    <div
      class="person-card"
      v-for="(person, idx) in persons"
      :key="person.userId"
    >
      <img :src="avatarImg" class="avatar" />
      <div class="fixed-name">{{ fixedNames[idx % fixedNames.length] }}</div>
      <div class="position">{{ jobTitles[idx % jobTitles.length] }}</div>
      <div class="info">
        <div class="intro">{{ person.self_intro }}</div>
      </div>
      <button @click="contact(person, idx)">联系</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import avatarImg from '@/views/img/qiuzhi.png'
export default {
  data() {
    return {
      persons: [],
      jobTitles: [
        '前端开发工程师',
        '后端开发工程师',
        '产品经理',
        '测试工程师',
        'UI设计师',
        '运维工程师',
        '数据分析师',
        '算法工程师',
        '项目经理',
        '移动开发工程师',
        '架构师',
        '实施顾问'
      ],
      fixedNames: ['张XX', '李XX', '王XX', '赵XX', '钱XX', '孙XX', '周XX', '吴XX', '钱XX', '孙XX', '周XX', '吴XX']
    }
  },
  methods: {
    async loadPersons() {
      const res = await axios.get('/resume/list')
      this.persons = res.data
    },
    contact(person, idx) {
      this.$router.push({
        name: 'HrMessage',
        query: {
          userId: person.userId,
          name: this.fixedNames[idx % this.fixedNames.length],
          position: this.jobTitles[idx % this.jobTitles.length]
        }
      })
    }
  },
  computed: {
    avatarImg() {
      return avatarImg
    }
  },
  mounted() {
    this.loadPersons()
  }
}
</script>

<style scoped>
.recommend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.person-card {
  width: 260px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 2px 8px #f0f1f2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
}
.fixed-name {
  font-size: 17px;
  color: #333;
  font-weight: bold;
  margin-bottom: 6px;
}
.position {
  color: #888;
  margin-bottom: 8px;
  font-size: 15px;
}
.info {
  text-align: center;
  margin-bottom: 12px;
}
.intro {
  color: #666;
  font-size: 14px;
}
button {
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  cursor: pointer;
}
button:hover {
  background: #40a9ff;
}
</style> 